<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jhq08</title>
    <link rel="stylesheet" href="jhq08.css" />
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="heart">
      <div id="appjie">
        <div>
          <input
            class="text"
            type="text"
            placeholder="输入内容"
            v-model="theWord"
            @keyup.enter="addWord"
          />
          <br />
          <p class="tips">你要输入的单词是：{{theWord}}</p>
          <div id="button">
            <input type="button" value="添加" @click="addWord" />
            <input type="button" value="删除" @click="removeLastWord" />
          </div>
        </div>
        <div>
          <p v-if="showWarning" class="warning-text tips">单词数量超过5个了！</p>
          <ul>
            <li
              v-for="(item, index) in submitedWords"
              :key="index"
              :class="{ 'warning-text': showWarning }"
            >
              {{item}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        data: function () {
          return {
            theWord: "",
            submitedWords: [],
          };
        },
        methods: {
          //使用 unshift 添加到数组开头
          addWord() {
            if (this.theWord.trim()) {
              this.submitedWords.unshift(this.theWord);
              this.theWord = "";
            }
          },
          // 删除最后一个元素（pop）
          removeLastWord() {
            if (this.submitedWords.length > 0) {
              this.submitedWords.pop();
            }
          },
        },
        computed: {
          // 计算属性判断是否显示警告
          showWarning() {
            return this.submitedWords.length > 5;
          },
        },
      });

      app.mount("#appjie");
    </script>
  </body>
</html>
